import React, {useState} from "react";
import {createDrawerNavigator, DrawerContentScrollView, DrawerItem} from '@react-navigation/drawer';
import {makeStyles} from "@rn-vui/themed";
import {Icon} from "@rn-vui/themed";
import AppNavigator from "./AppNavigator.tsx";
import SettingsNavigator from "./SettingsNavigator.tsx";
import {useThemeColors} from "../pages/hooks/hooks.tsx";
import TokenStorage from "../utils/TokenStorage";
import {useDispatch} from "react-redux";
import {userDidSignOut} from "../store/actions";

const Drawer = createDrawerNavigator();

const useStyles = makeStyles({
    drawer: {
        backgroundColor: "white",
    },
    itemLabel: {
        fontSize: 20,
    }
});
const DrawerContent = (props: any) => {
    const navigation = props.navigation;
    const colors = useThemeColors();
    const styles = useStyles();
    const [active, setActive] = useState<string>('home');
    const dispatch = useDispatch();

    return (
        <DrawerContentScrollView>
            <DrawerItem
                label={"Home"}
                onPress={() => {
                    setActive('home');
                    navigation.navigate("AppNavigator");
                }}
                labelStyle={styles.itemLabel}
                icon={({focused, color, size}) => (
                    <Icon
                        name={'home'}
                        color={color}
                    />
                )}
                activeTintColor={colors.white}
                inactiveTintColor={colors.secondary}
                activeBackgroundColor={colors.grey3}
                inactiveBackgroundColor={colors.white}
                focused={active === 'home'}
            />
            <DrawerItem
                label={"Settings"}
                onPress={() => {
                    setActive('settings');
                    navigation.navigate("SettingsNavigator");
                }}
                labelStyle={styles.itemLabel}
                icon={({focused, color, size}) => (
                    <Icon
                        name={'settings'}
                        color={color}
                    />
                )}
                activeTintColor={colors.white}
                inactiveTintColor={colors.secondary}
                activeBackgroundColor={colors.grey3}
                inactiveBackgroundColor={colors.white}
                focused={active === 'settings'}
            />
            <DrawerItem
                label={"Logout"}
                onPress={() => {
                    setActive('logout');
                    TokenStorage.removeToken();
                    dispatch(userDidSignOut());
                }}
                labelStyle={styles.itemLabel}
                icon={({focused, color, size}) => (
                    <Icon
                        name={'logout'}
                        color={color}
                    />
                )}
                activeTintColor={colors.white}
                inactiveTintColor={colors.secondary}
                activeBackgroundColor={colors.grey3}
                inactiveBackgroundColor={colors.white}
                focused={active === 'logout'}
            />
        </DrawerContentScrollView>
    )
}

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            drawerContent={(props) => <DrawerContent {...props} />}
            screenOptions={(props) => ({
                headerShown: false
            })}
        >
            <Drawer.Screen name="AppNavigator" component={AppNavigator}/>
            <Drawer.Screen name="SettingsNavigator" component={SettingsNavigator}/>
        </Drawer.Navigator>
    )
}

export default DrawerNavigator;
